<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>02  三级联动</title>
    <script src="./js/vue.js"></script>
</head>
<body>
    <div id="app">
        省份
        <select v-model = "cityList">
            <option value="">请选择省份</option>
            <option :value="item.list"  v-for = "item in list" :key = "item.id">{{item.city}}</option>           
        </select>
        市级
        <select v-model = "province">
            <option value="">请选择市</option>
            <option :value="item.list" v-for = "item in cityList" :key="item.id">{{item.city}}</option>
        </select>
        区级
        <select>
            <option value="">请选择县区</option>
            <option v-for="item in province">{{item.city}}</option>    
        </select>
    </div>
    
</body>
<script>
    new Vue({
        el : "#app",
        data: {
            cityList : "",
            province : "",
            list : [
            { id: 1, city: "湖北", list: [
                { id: 11, city: "湖北-1", list: [{ id: 111, city: "湖北-1-1" },{ id: 112, city: "湖北-1-2" }] }, 
                { id: 12, city: "湖北-2", list: [{ id: 121, city: "湖北-2-1" } , { id: 122, city: "湖北-2-2" }] }] },

            { id: 2, city: "湖南", list: [
                { id: 21, city: "湖南—1", list: [{ id: 211, city: "湖南—1-1" } , { id: 212, city: "湖南—1-2" }] } , { id: 22, city: "湖南—2", list: [{ id: 221, city: "湖南—2-1" } , { id: 222, city: "湖南—2-2" }] }] },

            { id: 3, city: "河北", list: [
                { id: 31, city: "河北—1", list: [{ id: 311, city: "河北—1-1" } , { id: 312, city: "河北—1-2" }] } , { id: 32, city: "河北—2", list: [{ id: 321, city: "河北—2-1" } , { id: 322, city: "河北—2-2" }] }] },

            { id: 4, city: "河南", list: [
                { id: 41, city: "河南-1", list: [{ id: 411, city: "河南-1-1" } , { id: 412, city: "河南-1-2" }] } , { id: 42, city: "河南-2", list: [{ id: 421, city: "河南-2-1" } , { id: 422, city: "河南-2-2" }] }] }]
        },
        methods : {

        },
        watch : {
            cityList(){
                this.province = "";
            }
        }
    })
</script>
</html>